<template>
	<view class="shop">
		<view class="topTitle">
			<view class="leftshopBox">
				<image :src="icon" mode="scaleToFill"></image>
				<view class="shopInfo">
					<view class="shopName">
						{{storeName}}
					</view>
					<view class="desction">
						<!-- 5000人收藏 共30件商品 -->
					</view>
				</view>
			</view>
			<view class="collectBtn" @tap="collectShop">
				<image v-if="isCollect == 0" src="../../static/images/collect_icon_1.png" mode="scaleToFill"></image>
				<text v-if="isCollect == 0">收藏</text> <text v-if="isCollect == 1">已收藏</text>
			</view>
		</view>
		
	<view class="searchCommodityList" >
			<view style="background-color: #fff;">
			<view class="title">
				全部商品
			</view>
			<view class="searchheader">
				<view @tap="changeCurrent(0)" class="selectBtns" v-bind:class="{active:current == 0 }">
					综合
				</view>
				<view @tap="changeCurrent(1)" class="selectBtns" v-bind:class="{active:current == 1 }">
					
						<xfl-select
							:list="saleList"
							:clearable="false"
							@change = "changeSale"
							:initValue="'销量降序'"
							class="select"
						>
						       </xfl-select>
					
					
					
				</view>
				<view @tap="changeCurrent(2)" class="selectBtns" v-bind:class="{active:current == 2 }">
					<xfl-select
						:list="priceList"
						:clearable="false"
						@change = "changePrice"
						:initValue="'价格升序'"
						class="select"
					>
					       </xfl-select>
					 
				</view>
				<view @tap="changeCurrent(3)" class="selectBtns" v-bind:class="{active:current == 3 }">
					新品
				</view>
			</view>
			</view>
			
		
			<view >
				<view class="uni-list selectLists">
					<view class="uni-list-cell selectList" @tap="goInfo(item.id)" v-for="(item,index) in commodityList" :key="index">
						<view class="imgbox">
							<image :src="item.pic.split(',')[0]" mode="scaleToFill"></image>
						</view>
						<view class="desction">
							{{item.name}}
						</view>
						<view class="priceBox">
							<view class="price">
								￥{{item.price}}
							</view>
							<view class="salesNum">
								总销量{{item.sale}}
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import xflSelect from '../../components/xfl-select/xfl-select.vue';     //导入
	
	export default{
		components: { xflSelect }, 
		data() {
			return {
				commodityList: [],
				saleList: [ {key:4,value:"销量降序"},{key:5,value:"销量升序"}],
				priceList: [ {key:2,value:"价格升序"},{key:1,value:"价格降序"}],
				current:0,
				shopId:"",
				merchantId:"",
				icon:"",
				storeLogo:"",
				storeName:"",
				isCollect:0,
				pageNum:1,
				sortRule:0
			}
		},
		onLoad(e) {
			this.shopId = e.shopId;
			this.getIsCollect()
			this.getStoreInfo()
		},
		onReachBottom() {
			// this.getSearchData()
			this.getData()
		},
		methods:{
			//获取店铺信息
			getStoreInfo(){
				let data = {
					storeId:this.shopId
				}
				this.$http.post(this.$http.baseUrl + '/api/v1.0/admin/store/findByStoreId',data,res=>{
					let obj = res.data.data
					this.merchantId = obj.merchantId;
					this.icon = obj.storeLogo;
					this.storeName = obj.storeName;
					this.storeStatus = obj.storeStatus;
					this.getData()
				})
			},
			//获取店铺是否被收藏
			getIsCollect(){
				let data = {
					storeId:this.shopId
				}
				this.$http.post('/api/v1.0/collect/findStoreCollect',data,res=>{
					if(res.data.data == 1){
						this.isCollect = res.data.data;
					}else{
						this.isCollect = 0;
					}
				})
			},
			//收藏/取消收藏
			collectShop(){
				if(uni.getStorageSync('userId') == ''){
					uni.navigateTo({
						url:'../login/login'
					})
					return
				}
				
				
				let data = {
					 "icon": this.icon,
					 "merchantId": this.merchantId,
					 "storeId": this.shopId,
					 "storeName": this.storeName,
				}
				if(this.isCollect == 0){
					this.$http.post('/api/v1.0/collect/SaveStore',data,res=>{
						if(res.data.data == 1){
							this.isCollect = 1
							uni.showToast({
								title:"收藏成功",
								icon:"none"
							})
						}else{
							uni.showToast({
								title:"收藏失败",
								icon:"none"
							})
						}
					})
				}else{
					this.$http.post('/api/v1.0/collect/DeleteStore',data,res=>{
						if(res.data.data == 1){
							this.isCollect = 0;
							uni.showToast({
								title:"取消收藏成功",
								icon:"none"
							})
						}else{
							uni.showToast({
								title:"取消收藏失败",
								icon:"none"
							})
						}
					})
				}
				
			},
			changeCurrent(num){
				this.current = num;
				this.pageNum = 1;
				this.commodityList = []
				if(num == 0){
					this.sortRule = 0
				}else if(num == 1){
					this.sortRule = 4
				} else if(num == 2){
					this.sortRule = 2
				} else if(num == 3){
					this.sortRule = 3
				} 
				this.getData()
			},
			changeSale(e){
					this.current = 1
					this.sortRule = e.orignItem.key;
					this.pageNum = 1;
					this.commodityList = []
					this.getData()
			},
			changePrice(e){
					this.current = 2
					this.sortRule = e.orignItem.key;
					this.pageNum = 1;
					this.commodityList = []
					this.getData()
				
			},
			getData(){
				let data = {
					merchantId: this.merchantId,
					storeId: this.shopId,
					pageNum:this.pageNum,
					pageSize:10,
					sortRule:this.sortRule
				}
				this.$http.post(this.$http.baseUrl + '/api/v1.0/app/product/findProductsByStoreId',data,res=>{
					this.pageNum++
					if(this.commodityList.length == 0){
						this.commodityList = res.data.data.items;
					}else{
						this.commodityList = this.commodityList.concat(res.data.data.items)
					}
				})
			},
			goInfo(id){
				uni.navigateTo({
					url:'../details/details?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.shop{
		width: 100%;
		// min-height: 100vh;
		background-color: #f2f2f2;
		.topTitle{
			margin-top: 20upx;
			background-color: #fff;
			height: 200upx;
			box-sizing: border-box;
			padding: 50upx 28upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.leftshopBox{
				display: flex;
				align-items: center;
				image{
					width: 98upx;
					height: 98upx;
					margin-right: 20upx;
				}
				.shopInfo{
					.shopName{
						font-size: 32upx;
						font-weight: bold;
						color: #333;
					}
					.desction{
						font-size: 24upx;
						color: #808080;
					}
				}
				
			}
			.collectBtn{
				width: 146upx;
				height: 46upx;
				border-radius: 10upx;
				border:1px solid rgba(246,56,16,1);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28upx;
				color: #F63810;
				image{
					width: 33upx;
					height: 33upx;
				}
			}
		}
		.searchCommodityList{
			margin-top: 10upx;
			.title{
				text-align: center;
				font-size: 30upx;
				font-weight: bold;
				height: 88upx;
				line-height: 88upx;
				border-bottom: 1upx solid #f2f2f2;
			}
			.searchheader{
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top: 30upx;
				padding-bottom: 30upx;
				.selectBtns{
					width: 20%;
					text-align: center;
					font-size: 26upx;
					color: #4d4d4d;
					&.active{
						color: #F63810;
						.select{
							.input{
								color: #F63810;
							}
							.right-arrow{
								color: #F63810;
							}
						}
					}
				}
			}
			.selectLists{
				width: 694upx;
				margin: 0 auto;
				margin-top: 50upx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.selectList{
					border-radius: 20upx;
					background-color: #fff;
					overflow: hidden;
					width: 334upx;
					height: 530upx;
					margin-right: 25.7upx;
					margin-bottom: 26upx;
					&:nth-child(2n){
						margin-right: 0;
					}
					image{
						width: 334.3upx;
						height: 333upx;					
					}
					.desction{
						height: 80upx;
						width: 297upx;
						margin: 24upx auto;
						color: #333;
						font-weight: 500;
						font-size: 28upx;
						display: -webkit-box;
						overflow: hidden; 
						white-space: normal!important;
						text-overflow: ellipsis;
						word-wrap: break-word;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.priceBox{
						display: flex;
						justify-content: space-between;
						width: 297upx;
						margin: 0 auto;
						.price{
						color: #F63810;
						font-size: 24upx;
							text{
								font-size: 32upx;
								font-weight: bold;
							}
						}
						.salesNum{
							color: #4d4d4d;
							font-size: 24upx;
						}
					}
					
				}
			}
		}
	}
</style>
